<template>
  <view class="homepage">
    <view class="homepage_cen">
      <view class="nav_bar" :style="{ height: topHeight + 'px' }">
        <u-navbar safeAreaInsetTop bgColor="transparent">
          <view class="u-nav-slot" slot="left">
            <view style="color: #fff">
              <view
                >{{ location
                }}<uni-icons color="#fff" type="bottom" size="14"></uni-icons
              ></view>
              <!-- <view>26.8°C</view> -->
            </view>
          </view>
          <view class="u-nav-slot" slot="center">
            <view class="search-box">
              <u-icon name="search" color="#fff"></u-icon>
              {{ "景区" }}
            </view>
          </view>
        </u-navbar>
      </view>

      <!-- 最上面的轮播图 -->
      <swiper
        class="swiper"
        :duration="500"
        :interval="5000"
        :indicator-dots="false"
        autoplay
        circular
        :current="sCurrent"
        @change="sChange"
      >
        <swiper-item
          v-for="(item, index) in list"
          :key="index"
          :item-id="index"
          @click="clickList(item)"
        >
          <img :src="item.url" alt="" />
        </swiper-item>
      </swiper>

      <!-- 导览 -->
      <view class="guide_view">
        <view
          v-for="(i, index) in guideArr"
          :key="index"
          class="guide_item"
          @click="toPath(i)"
        >
          <view>
            <img :src="getImgSrc(index)" />
            <p>{{ i.name }}</p>
          </view>
        </view>
      </view>

      <!-- 城市名片 -->
      <view class="city_card">
        <IndexTitle title1="城市名片" title2="发现舒城" />
        <view class="center">
          <view class="top-swiper">
            <view class="box" id="topImg">
              <swiper
                :style="'height:' + MarginTop + 'px'"
                class="box_swiper"
                :previous-margin="twoSwiper.margin"
                :next-margin="twoSwiper.margin"
                circular
                :current="twoSwiper.index"
                interval="5000"
                @change="swiperChange"
                :autoplay="true"
              >
                <swiper-item
                  v-for="(item, index) in twoSwiper.list"
                  :key="index"
                  @click="clickSItem(index)"
                >
                  <img
                    class="le-img"
                    :src="item"
                    :class="twoSwiper.index == index ? 'le-active' : ''"
                  />
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
      </view>

      <!-- 特色小吃 -->
      <view class="street_food">
        <IndexTitle title1="特色小吃" title2="舌尖上的舒城" />
        <view class="food_view">
          <view
            v-for="i in foodsArr"
            :key="i.id"
            class="food_item"
            @click="clickFoods(i)"
          >
            <img :src="config.imgUrl+'home/foodImg.png'" />
            <text>特色小吃{{ i.id }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="custom" @click="goCusCenter">
      <image :src="config.imgUrl+'home/custom.png'" />
    </view>

    <tabs :current="2" />
  </view>
</template>

<script>
import config from "@/config";
import { getList } from "@/api/home/index";
import { getListWithJingDianApi } from "@/api/jingqu";
import { getStrategyList } from "@/api/introduction";

import IndexTitle from "./title.vue";

export default {
  components: {
    IndexTitle,
  },
  data() {
    return {
      config,
      list: [],
      location: "舒城智慧",
      adverText: "假期期间游客增多，请合理安排游玩时间。",
      value1: 2,
      sCurrent: 0,
      topHeight: 0,
      // 九宫格
      guideArr: [
        { name: "门票", path: "/pages/liveAction/index", isTab: true },
        { name: "酒店", path: "", isTab: true },
        { name: "热门景区", path: "/pages/liveAction/index", isTab: true },
        {
          name: "周边游",
          path: "/pages/Introduction/index",
          isTab: true,
          flag: 1,
        }, // 攻略-最新
        { name: "精品路线", path: "/pages/Introduction/index", isTab: true },
        { name: "玩什么", path: "/pages/Introduction/index", isTab: true },
        { name: "吃什么", path: "/pages/Introduction/index", isTab: true },
        {
          name: "璀璨文化",
          path: "/pages/culturalCreative/index",
          isTab: true,
        },
        { name: "玩在乡间", path: "/pages/Introduction/index", isTab: true },
        { name: "公告通知", path: "/pages/notice/index", isTab: false },
      ],
      twoSwiper: {
        margin: "150rpx",
        index: 0,
        list: [],
      },
      swiperIdArr: [], // 景区id
      swiperImg: [],
      MarginTop: 0,
      foodsArr: [],
    };
  },
  onLaunch() {
    this.value1 = 2;
  },
  onShow() {
    this.getListWithJingDian();
    this.getStrategyListFun();
  },
  onLoad() {
    this.getListFn();
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.topHeight = menuButtonInfo.bottom + menuButtonInfo.height;
    setTimeout(() => {
      // 设置评价按钮的margin-top
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#topImg")
        .boundingClientRect((data) => {
          console.log(data, "topImgtopImg");
          this.MarginTop = data.height;
        })
        .exec();
    }, 1000);
  },
  methods: {
    clickList(item) {
      uni.navigateTo({
        url: `/pages/liveAction/pages/infoPage?jingquId=${item.jingquId}`,
      });
    },

    // 跳转到攻略详情
    clickFoods(item) {
      uni.navigateTo({
        url: `/pages/Introduction/pages/detail?strategyId=${item.id}&createTime=${item.createTime}`,
      });
    },
    // 获取攻略
    getStrategyListFun() {
      getStrategyList({ auditStatus: 1, scene: 3 })
        .then((res) => {
          if (res.code === 200) {
            this.foodsArr = res.data.rows;
          } else {
            this.foodsArr = [];
          }
        })
        .catch(() => {
          this.foodsArr = [];
        });
    },
    // 点击事件
    clickSItem(index) {
      let jingquId = this.swiperIdArr[index];
      uni.navigateTo({
        url: `/pages/liveAction/pages/infoPage?jingquId=${jingquId}`,
      });
    },
    //swiper滑动事件
    swiperChange(e) {
      if (e.detail) {
        this.twoSwiper.index = e.detail.current;
      } else {
        this.twoSwiper.index = e.current;
      }
    },

    // 获取所有景区列表-用于背景
    getListWithJingDian() {
      getListWithJingDianApi()
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            // 保存景区id
            this.swiperIdArr = res.data.map((v) => {
              return v.jingquId;
            });
            this.swiperImg = res.data.map((v) => {
              return v.jingquPictureUrl;
            });
            this.twoSwiper.list = this.swiperImg;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转页面
    toPath(item) {
      if (!item.path) return;
      if (item.isTab) {
        wx.switchTab({
          url: item.path,
        });
      } else {
        uni.navigateTo({
          url: item.path,
        });
      }
      if (item.flag) {
        uni.setStorageSync("homeFlag", true);
      } else {
        uni.setStorageSync("homeFlag", false);
      }
    },
    // swiper 滚动
    sChange(e) {
      this.sCurrent = e.detail.current;
    },

    getListFn() {
      getList({
        pageSize: 100,
        pageNum: 1,
      }).then((res) => {
        console.log(res);
        let arr = res?.data?.rows || [];
        this.list = arr.map((item) => {
          return {
            url: item.imgUrl,
            jingquId: item.jingquId,
          };
        });
      });
    },
    goCusCenter() {
      uni.navigateTo({
        url: "/pages/intelCusService/customCenter/index",
      });
    },
    goSearch() {
      uni.navigateTo({
        url: "/pages/mine/waitingComment/index",
      });
    },
    getImgSrc(index) {
      return `${config.imgUrl}home/${index}.png`
      // return require(`@/static/images/home/${index}.png`);
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f2f2f2;
}
.homepage {
  background: linear-gradient(180deg, #0e9488 0%, #ffffff 27%);
  height: 100%;
  position: relative;
  margin-bottom: 120rpx;

  .homepage_cen {
    width: 100%;
    height: 100%;
    padding-left: 34rpx;
    padding-right: 34rpx;
  }

  .nav_bar {
    width: 100%;

    .search-box {
      display: flex;
      align-items: center;
      padding: 0 16rpx;
      width: 300rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      height: 64rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 64rpx;

      .u-icon {
        margin-right: 16rpx;
      }
    }
  }

  .swiper,
  .swiper-item {
    height: 300rpx;
    border-radius: 10rpx;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .guide_view {
    margin-top: 60rpx;
    color: #000;
    font-size: 22rpx !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .guide_item {
      width: 16%;
      margin: 10rpx;

      view {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        image {
          width: 96rpx;
          height: 96rpx;
        }
      }
    }
  }

  // 城市名片
  .city_card {
    .center {
      width: 100%;
      height: 632rpx;
      border-radius: 32rpx;
      overflow: hidden;

      .top-swiper {
        height: 100%;

        .bg {
          padding-top: var(--status-bar-height);
          box-sizing: content-box;
          width: 100%;
          height: 100%;
          position: relative;
        }

        .box {
          box-sizing: content-box;
          width: 100%;
          height: 100%;
        }

        .box_swiper {
          width: 100%;
          height: 100%;
          margin: 0 4rpx;

          .le-img {
            width: 100%;
            height: 100%;
            display: block;
            transform: scale(0.75);
            transition: transform 0.3s ease-in-out 0s;
            border-radius: 20rpx;

            &.le-active {
              transform: scale(1);
            }
          }
        }
      }
    }
  }

  // 特色小吃
  .street_food {
    width: 100%;
    padding-bottom: 200rpx;
    .food_view {
      display: flex;
      flex-wrap: wrap;
      .food_item {
        width: 216rpx;
        height: 216rpx;
        margin-right: 17rpx;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;
        &:nth-child(3n) {
          margin-right: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
        text {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          font-weight: 400;
          font-size: 36rpx;
          color: #ffffff;
        }
      }
    }
  }

  .custom {
    position: fixed;
    width: 64rpx;
    height: 64rpx;
    right: 32rpx;
    bottom: 312rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
</style>
